<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>积分交易记录</title>
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/tabletable.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.min.js"></script>
          <script src="../assets/js/respond.min.js"></script>
          <![endif]-->
  </head>

  <body>
    <!--内容区域-->
    <div class="content">
      <div class="content-header col-md-12">
        <div class="con-header">
          <div class="col-md-7 col-sm-7 col-xs-7">
            <span class="content-title-pre"></span><span class="content-title-word">积分交易记录</span>
          </div>
          <div class="col-md-5 col-sm-5 col-xs-5">
            <button type="button" class="btn btn-info btn-header" data-toggle="modal" data-target="#add_store">添加+</button>
          </div>
        </div>
      </div>
      <div class="content_serach row">
        <input type="text" class="form-control serach_input" placeholder="请输入名称">
        <button type="button" class="btn btn-info serach_btn">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
      </div>
      <div class="table-responsive mt20">
        <table class="table">
          <thead class="tablethead">
            <tr>
              <th class="firstth" valign="middle">序号</th>
              <th class="secondta">会员姓名</th>
              <th>类别</th>
              <th>积分</th>
              <th>交易时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody class="mytable">
            <tr>
              <td class="firsttd" valign="middle">01</td>
              <td class="secondta">张三</td>
              <td>储值赠送</td>
              <td>123</td>
              <td>2016年7月12日</td>
              <td class="text-center">
                <button type="button" class="btn btn-default btn-table">查看</button>
              </td>
            </tr>
            <tr>
              <td class="firsttd" valign="middle">01</td>
              <td class="secondta">张三</td>
              <td>
                <div data-toggle="modal" data-target="#mallExchange">商城兑换</div>
              </td>
              <td>123</td>
              <td>2016年7月12日</td>
              <td class="text-center">
                <button type="button" class="btn btn-default btn-table">查看</button>
              </td>
            </tr>
            <tr>
              <td class="firsttd" valign="middle">01</td>
              <td class="secondta">张三</td>
              <td>储值赠送</td>
              <td>123</td>
              <td>2016年7月12日</td>
              <td class="text-center">
                <button type="button" class="btn btn-default btn-table">查看</button>
              </td>
            </tr>
            <tr>
              <td class="firsttd" valign="middle">01</td>
              <td class="secondta">张三</td>
              <td>
                <div data-toggle="modal" data-target="#mallExchange">商城兑换</div>
              </td>
              <td>123</td>
              <td>2016年7月12日</td>
              <td class="text-center">
                <button type="button" class="btn btn-default btn-table">查看</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
        <div class="page-page flr">
          <ul class="pagination">
            <li class="epage">
              <a href="#">上一页</a>
            </li>
            <li class="active">
              <a href="#">1 <span class="sr-only">(current)</span></a>
            </li>
            <li>
              <a href="#">2</a>
            </li>
            <li>
              <a href="#">3</a>
            </li>
            <!--<li><a href="#">4</a></li>-->
            <li>
              <a href="#">...</a>
            </li>
            <li class="epage">
              <a href="#">下一页</a>
            </li>
          </ul>
        </div>
        <div class="page-num flr">共9页，每页10条</div>
      </div>
    </div>
    <!--商城兑换弹出框-->
    <div class="modal fade" id="mallExchange" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <div class="zuo-close" data-dismiss="modal">
              <i class="iconfont icon-o1"></i>
            </div>
            <h5 class="modal-title" id="myModalLabel"><i class="iconfont icon-weixin"></i>&emsp;商城兑换</h5>
          </div>

          <div class="modal-body">
            <div class="row">
              <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">商品名称:<span>15元现金券</span></div>
              <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">积分兑换:<span>300</span></div>
              <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">商品名称:<span>卡券</span></div>
              <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">商品名称:<span>2016-11-01 12:56:29</span></div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/main.js"></script>
    <script type="text/javascript">
      colorStyle();
      // 给奇数行和偶数行不同的颜色
      function colorStyle() {
        $(".mytable").find("tr:even").addClass("oushu");
        $(".mytable").find("tr:odd").addClass("jishu");
        $(".mytable").find("tr:odd td:first-child").addClass("jishu");
      }

      // 给第一列高度
      firstTrHeight()

      function firstTrHeight() {
        for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
          var trht = $(".mytable tr")[i].offsetHeight
          var domtr = $(".mytable tr")[i];
          // 有30px的边距
          $(domtr).children('td').height(trht - 30);
          $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
        };
      }

      function checks(obj) {
        if($(obj).hasClass("checkno")) {
          $(obj).removeClass("checkno");
          $(obj).addClass("checkyes");
        } else {
          $(obj).addClass("checkno");
          $(obj).removeClass("checkyes");
        }
      }

      function status(obj) {
        if($(obj).hasClass("enable")) {
          $(obj).removeClass("enable");
          $(obj).addClass("disable");
        } else {
          $(obj).addClass("enable");
          $(obj).removeClass("disable");
        }
      }
    </script>
  </body>

</html>